# Component: Linked Content

Responsive grid wrapper for dynamic item collections

Layout Block

![[Pasted image 20260426085310.png]]

### BEM Anatomy

| Type      | Class Name           | Description                                                                                                     |
| --------- | -------------------- | --------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-linked-content` | The primary wrapper. Hosts contextual modifiers for content type identification.                                |
| Modifier  | `--articles`         | Applied when the block renders a manually selected list of articles.                                            |
| Modifier  | `--related`          | Applied when the block renders automatically generated related content.                                         |
| Modifier  | `--media`            | Applied when the block renders media archive/video cards.                                                       |
| Element   | `__container`        | The internal constraint wrapper (often mirroring Bootstrap’s `.container`) to align content with the site grid. |
| Element   | `__row`              | Bootstrap row wrapper. Resets gutters to `$spacer` via CSS variables.                                           |
| Element   | `__item`             | Individual grid cell. Manages vertical spacing via bottom margins.                                              |

### Layout Calculation Logic

To avoid "orphaned" items in the grid, the component calculates the Bootstrap column width based on the modulo of the collection size:

###### 3-Column Grid (Default)

Triggered if `count % 3 == 0`.

`.col-md-4`

###### 2-Column Grid (Fallback)

Triggered for all other counts (e.g., 2, 4, 8 items).

`.col-md-6`

##### Generated HTML (Media Mode)

```html
<div class="as-linked-content as-linked-content--media">
    <div class="as-linked-content__container">
        <div class="as-linked-content__row row">
            <!-- 2-column example -->
            <div class="as-linked-content__item col-md-6">
                <div class="stream-card">...</div>
            </div>
            <div class="as-linked-content__item col-md-6">
                <div class="stream-card">...</div>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-linked-content {
  &__row {
    // Override standard row gutters
    --bs-gutter-x: 1rem; 
    --bs-gutter-y: 1rem;
  }
  
  &__item {
    // Vertical rhythm between rows
    margin-bottom: 1rem;
  }
}
```
